<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>专题列表 - 高级筛选</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #3498db;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      color: white;
      font-size: 20px;
    }
    
    /* 搜索栏 */
    .search-container {
      padding: 12px 15px;
      background-color: white;
      position: sticky;
      top: 57px;
      z-index: 99;
      border-bottom: 1px solid #eee;
    }
    
    .search-bar {
      display: flex;
      gap: 10px;
    }
    
    .search-input {
      flex: 1;
      padding: 10px 15px 10px 40px;
      border: 1px solid #ddd;
      border-radius: 25px;
      font-size: 14px;
      outline: none;
      background: #f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 15px center;
    }
    
    .search-input:focus {
      border-color: #3498db;
      background-color: white;
    }
    
    .filter-toggle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
    }
    
    /* 筛选面板 */
    .filter-panel {
      background-color: white;
      border-bottom: 1px solid #eee;
      padding: 15px;
      display: none;
    }
    
    .filter-panel.active {
      display: block;
    }
    
    .filter-section {
      margin-bottom: 15px;
    }
    
    .filter-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
    }
    
    .clear-filter {
      font-size: 13px;
      color: #3498db;
      font-weight: normal;
      cursor: pointer;
    }
    
    /* 分类筛选 */
    .category-filter {
      display: flex;
      overflow-x: auto;
      gap: 10px;
      padding-bottom: 5px;
    }
    
    .category-tag {
      padding: 6px 15px;
      background-color: #f5f5f5;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
      border: 1px solid transparent;
    }
    
    .category-tag.active {
      background-color: #3498db;
      color: white;
    }
    
    .category-tag.all {
      border-color: #ddd;
    }
    
    /* 时间筛选 */
    .time-filter {
      display: flex;
      gap: 10px;
    }
    
    .time-option {
      flex: 1;
      text-align: center;
      padding: 8px 0;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .time-option.active {
      border-color: #3498db;
      color: #3498db;
      background-color: #f0f7ff;
    }
    
    /* 内容类型筛选 */
    .content-type-filter {
      display: flex;
      gap: 10px;
    }
    
    .type-option {
      flex: 1;
      text-align: center;
      padding: 8px 0;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .type-option.active {
      border-color: #3498db;
      color: #3498db;
      background-color: #f0f7ff;
    }
    
    /* 排序筛选 */
    .sort-filter {
      display: flex;
      gap: 10px;
    }
    
    .sort-option {
      flex: 1;
      text-align: center;
      padding: 8px 0;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .sort-option.active {
      border-color: #3498db;
      color: #3498db;
      background-color: #f0f7ff;
    }
    
    /* 筛选操作按钮 */
    .filter-actions {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    
    .filter-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      border: none;
    }
    
    .reset-btn {
      background-color: #f5f5f5;
      color: #666;
    }
    
    .apply-btn {
      background-color: #3498db;
      color: white;
    }
    
    /* 活跃筛选标签 */
    .active-filters {
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
      display: flex;
      gap: 10px;
      overflow-x: auto;
      align-items: center;
    }
    
    .active-filter-tag {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      background-color: #f0f7ff;
      color: #3498db;
      border-radius: 20px;
      font-size: 13px;
      white-space: nowrap;
    }
    
    .remove-filter {
      cursor: pointer;
      font-size: 14px;
    }
    
    .clear-all {
      color: #666;
      font-size: 13px;
      margin-left: auto;
      white-space: nowrap;
      cursor: pointer;
    }
    
    /* 专题列表 */
    .topics-container {
      padding: 10px 15px;
    }
    
    .topic-item {
      background-color: white;
      border-radius: 10px;
      margin-bottom: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: transform 0.2s ease;
    }
    
    .topic-item:hover {
      transform: translateY(-2px);
    }
    
    .topic-link {
      text-decoration: none;
      color: inherit;
      display: block;
    }
    
    /* 无图专题 */
    .topic-no-img {
      padding: 15px;
    }
    
    /* 单图专题 */
    .topic-single-img {
      display: flex;
      padding: 15px;
      gap: 15px;
    }
    
    .topic-single-img .topic-content {
      flex: 1;
    }
    
    .topic-single-img .topic-img {
      width: 100px;
      height: 100px;
      border-radius: 6px;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    /* 多图专题 */
    .topic-multi-img {
      padding: 15px;
    }
    
    .multi-img-container {
      display: flex;
      gap: 5px;
      margin-top: 10px;
      height: 90px;
    }
    
    .multi-img-container img {
      flex: 1;
      height: 100%;
      border-radius: 6px;
      object-fit: cover;
    }
    
    /* 专题内容样式 */
    .topic-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 6px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .topic-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.4;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .topic-meta {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #999;
      gap: 15px;
    }
    
    .topic-meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .topic-category {
      display: inline-block;
      padding: 2px 8px;
      background-color: #f0f7ff;
      color: #3498db;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 6px;
      margin-bottom: 6px;
    }
    
    /* 创建专题按钮 */
    .create-topic-btn {
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 3px 10px rgba(52, 152, 219, 0.4);
      border: none;
      cursor: pointer;
      z-index: 90;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 95;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #3498db;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 15px 0;
      color: #3498db;
      font-size: 15px;
      cursor: pointer;
    }
    
    /* 空状态 */
    .empty-state {
      padding: 50px 20px;
      text-align: center;
      display: none;
    }
    
    .empty-state.active {
      display: block;
    }
    
    .empty-icon {
      font-size: 60px;
      color: #ddd;
      margin-bottom: 20px;
    }
    
    .empty-text {
      color: #999;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <button class="btn btn-link p-0 nav-btn" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">专题列表</h1>
    <button class="btn btn-link p-0 nav-btn">
      <i class="fa fa-cog"></i>
    </button>
  </div>
  
  <!-- 搜索和筛选按钮 -->
  <div class="search-container">
    <div class="search-bar">
      <input type="text" class="search-input" placeholder="搜索专题...">
      <button class="filter-toggle" id="filterToggle">
        <i class="fa fa-filter"></i>
      </button>
    </div>
  </div>
  
  <!-- 筛选面板 -->
  <div class="filter-panel" id="filterPanel">
    <!-- 分类筛选 -->
    <div class="filter-section">
      <div class="filter-title">
        <span>专题分类</span>
        <span class="clear-filter" data-target="category">清除</span>
      </div>
      <div class="category-filter">
        <div class="category-tag all active" data-category="all">全部</div>
        <div class="category-tag" data-category="food">美食</div>
        <div class="category-tag" data-category="travel">旅行</div>
        <div class="category-tag" data-category="tech">科技</div>
        <div class="category-tag" data-category="entertainment">娱乐</div>
        <div class="category-tag" data-category="sports">体育</div>
        <div class="category-tag" data-category="health">健康</div>
        <div class="category-tag" data-category="education">教育</div>
        <div class="category-tag" data-category="finance">财经</div>
        <div class="category-tag" data-category="fashion">时尚</div>
      </div>
    </div>
    
    <!-- 时间筛选 -->
    <div class="filter-section">
      <div class="filter-title">
        <span>发布时间</span>
        <span class="clear-filter" data-target="time">清除</span>
      </div>
      <div class="time-filter">
        <div class="time-option active" data-time="all">全部时间</div>
        <div class="time-option" data-time="day">24小时内</div>
        <div class="time-option" data-time="week">本周</div>
        <div class="time-option" data-time="month">本月</div>
      </div>
    </div>
    
    <!-- 内容类型筛选 -->
    <div class="filter-section">
      <div class="filter-title">
        <span>内容类型</span>
        <span class="clear-filter" data-target="type">清除</span>
      </div>
      <div class="content-type-filter">
        <div class="type-option active" data-type="all">全部类型</div>
        <div class="type-option" data-type="text">纯文字</div>
        <div class="type-option" data-type="single-img">单图</div>
        <div class="type-option" data-type="multi-img">多图</div>
      </div>
    </div>
    
    <!-- 排序筛选 -->
    <div class="filter-section">
      <div class="filter-title">
        <span>排序方式</span>
        <span class="clear-filter" data-target="sort">清除</span>
      </div>
      <div class="sort-filter">
        <div class="sort-option active" data-sort="hot">热门优先</div>
        <div class="sort-option" data-sort="new">最新发布</div>
        <div class="sort-option" data-sort="comment">评论最多</div>
        <div class="sort-option" data-sort="like">点赞最多</div>
      </div>
    </div>
    
    <!-- 筛选操作按钮 -->
    <div class="filter-actions">
      <button class="filter-btn reset-btn" id="resetFilters">重置</button>
      <button class="filter-btn apply-btn" id="applyFilters">应用筛选</button>
    </div>
  </div>
  
  <!-- 活跃筛选标签 -->
  <div class="active-filters" id="activeFilters">
    <!-- 活跃筛选标签将通过JS动态添加 -->
    <div class="clear-all" id="clearAllFilters">清除全部</div>
  </div>
  
  <!-- 专题列表 -->
  <div class="topics-container" id="topicsContainer">
    <!-- 无图专题 -->
    <div class="topic-item" data-category="tech" data-type="text">
      <a href="#" class="topic-link">
        <div class="topic-no-img">
          <span class="topic-category">科技</span>
          <h3 class="topic-title">2023年最值得关注的科技趋势有哪些？一起来预测未来发展</h3>
          <p class="topic-desc">随着人工智能、区块链、元宇宙等技术的快速发展，科技正在深刻改变我们的生活方式和社会结构...</p>
          <div class="topic-meta">
            <div class="topic-meta-item">
              <i class="fa fa-user-o"></i>
              <span>科技前沿</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-comment-o"></i>
              <span>328</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-eye"></i>
              <span>1.2k</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-heart-o"></i>
              <span>256</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <!-- 单图专题 -->
    <div class="topic-item" data-category="food" data-type="single-img">
      <a href="#" class="topic-link">
        <div class="topic-single-img">
          <div class="topic-content">
            <span class="topic-category">美食</span>
            <h3 class="topic-title">隐藏在城市角落的10家宝藏小吃店，本地人私藏推荐</h3>
            <p class="topic-desc">这些小店可能没有华丽的装修，但每一家都有自己的招牌美食，是真正的吃货才知道的好去处...</p>
            <div class="topic-meta">
              <div class="topic-meta-item">
                <i class="fa fa-user-o"></i>
                <span>城市味蕾</span>
              </div>
              <div class="topic-meta-item">
                <i class="fa fa-comment-o"></i>
                <span>156</span>
              </div>
              <div class="topic-meta-item">
                <i class="fa fa-heart-o"></i>
                <span>421</span>
              </div>
            </div>
          </div>
          <img src="https://picsum.photos/400/400?random=20" alt="美食专题图片" class="topic-img">
        </div>
      </a>
    </div>
    
    <!-- 多图专题 -->
    <div class="topic-item" data-category="travel" data-type="multi-img">
      <a href="#" class="topic-link">
        <div class="topic-multi-img">
          <span class="topic-category">旅行</span>
          <h3 class="topic-title">云南小众旅行地推荐，避开人潮享受真正的自然风光</h3>
          <p class="topic-desc">除了大理丽江，云南还有这些美丽的地方值得一去，每一处都能让你感受到不一样的民族风情和自然景观...</p>
          <div class="multi-img-container">
            <img src="https://picsum.photos/300/300?random=30" alt="旅行图片1">
            <img src="https://picsum.photos/300/300?random=31" alt="旅行图片2">
            <img src="https://picsum.photos/300/300?random=32" alt="旅行图片3">
          </div>
          <div class="topic-meta">
            <div class="topic-meta-item">
              <i class="fa fa-user-o"></i>
              <span>背包客小明</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-comment-o"></i>
              <span>215</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-eye"></i>
              <span>3.5k</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-heart-o"></i>
              <span>876</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <!-- 无图专题 -->
    <div class="topic-item" data-category="health" data-type="text">
      <a href="#" class="topic-link">
        <div class="topic-no-img">
          <span class="topic-category">健康</span>
          <h3 class="topic-title">办公室人群必备的5个健康习惯，简单有效改善亚健康状态</h3>
          <p class="topic-desc">长时间久坐、缺乏运动、饮食不规律是很多办公室工作者的通病，这些简单的习惯可以帮助你改善健康状况...</p>
          <div class="topic-meta">
            <div class="topic-meta-item">
              <i class="fa fa-user-o"></i>
              <span>健康管理师</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-comment-o"></i>
              <span>98</span>
            </div>
            <div class="topic-meta-item">
              <i class="fa fa-heart-o"></i>
              <span>320</span>
            </div>
          </div>
        </div>
      </a>
    </div>
    
    <!-- 单图专题 -->
    <div class="topic-item" data-category="entertainment" data-type="single-img">
      <a href="#" class="topic-link">
        <div class="topic-single-img">
          <div class="topic-content">
            <span class="topic-category">娱乐</span>
            <h3 class="topic-title">年度最佳电影盘点，这些高分影片你看过几部？</h3>
            <p class="topic-desc">从剧情片到科幻片，从喜剧到纪录片，本年度有许多优秀的电影作品值得一看...</p>
            <div class="topic-meta">
              <div class="topic-meta-item">
                <i class="fa fa-user-o"></i>
                <span>影评人老王</span>
              </div>
              <div class="topic-meta-item">
                <i class="fa fa-comment-o"></i>
                <span>452</span>
              </div>
              <div class="topic-meta-item">
                <i class="fa fa-eye"></i>
                <span>5.2k</span>
              </div>
              <div class="topic-meta-item">
                <i class="fa fa-heart-o"></i>
                <span>1253</span>
              </div>
            </div>
          </div>
          <img src="https://picsum.photos/400/400?random=40" alt="电影专题图片" class="topic-img">
        </div>
      </a>
    </div>
  </div>
  
  <!-- 空状态 -->
  <div class="empty-state" id="emptyState">
    <div class="empty-icon">
      <i class="fa fa-search"></i>
    </div>
    <div class="empty-text">没有找到符合条件的专题</div>
  </div>
  
  <!-- 加载更多 -->
  <div class="load-more" onclick="loadMoreTopics()">
    <i class="fa fa-spinner fa-spin"></i> 加载更多专题
  </div>
  
  <!-- 创建专题按钮 -->
  <button class="create-topic-btn">
    <i class="fa fa-plus"></i>
  </button>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-link active">
      <i class="fa fa-th-large nav-icon"></i>
      <span>专题</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-comments nav-icon"></i>
      <span>消息</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选器状态管理
    const filterState = {
      category: 'all',
      time: 'all',
      type: 'all',
      sort: 'hot',
      search: ''
    };
    
    // DOM元素
    const filterPanel = document.getElementById('filterPanel');
    const filterToggle = document.getElementById('filterToggle');
    const applyFiltersBtn = document.getElementById('applyFilters');
    const resetFiltersBtn = document.getElementById('resetFilters');
    const activeFiltersContainer = document.getElementById('activeFilters');
    const clearAllFiltersBtn = document.getElementById('clearAllFilters');
    const topicsContainer = document.getElementById('topicsContainer');
    const emptyState = document.getElementById('emptyState');
    const searchInput = document.querySelector('.search-input');
    
    // 切换筛选面板显示/隐藏
    filterToggle.addEventListener('click', () => {
      filterPanel.classList.toggle('active');
      // 切换图标
      const icon = filterToggle.querySelector('i');
      if (filterPanel.classList.contains('active')) {
        icon.classList.remove('fa-filter');
        icon.classList.add('fa-chevron-up');
      } else {
        icon.classList.remove('fa-chevron-up');
        icon.classList.add('fa-filter');
      }
    });
    
    // 分类筛选
    document.querySelectorAll('.category-tag').forEach(tag => {
      tag.addEventListener('click', function() {
        document.querySelectorAll('.category-tag').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        filterState.category = this.getAttribute('data-category');
      });
    });
    
    // 时间筛选
    document.querySelectorAll('.time-option').forEach(option => {
      option.addEventListener('click', function() {
        document.querySelectorAll('.time-option').forEach(o => o.classList.remove('active'));
        this.classList.add('active');
        filterState.time = this.getAttribute('data-time');
      });
    });
    
    // 内容类型筛选
    document.querySelectorAll('.type-option').forEach(option => {
      option.addEventListener('click', function() {
        document.querySelectorAll('.type-option').forEach(o => o.classList.remove('active'));
        this.classList.add('active');
        filterState.type = this.getAttribute('data-type');
      });
    });
    
    // 排序筛选
    document.querySelectorAll('.sort-option').forEach(option => {
      option.addEventListener('click', function() {
        document.querySelectorAll('.sort-option').forEach(o => o.classList.remove('active'));
        this.classList.add('active');
        filterState.sort = this.getAttribute('data-sort');
      });
    });
    
    // 清除单个筛选条件
    document.querySelectorAll('.clear-filter').forEach(btn => {
      btn.addEventListener('click', function() {
        const target = this.getAttribute('data-target');
        
        switch(target) {
          case 'category':
            document.querySelectorAll('.category-tag').forEach(t => t.classList.remove('active'));
            document.querySelector('.category-tag.all').classList.add('active');
            filterState.category = 'all';
            break;
          case 'time':
            document.querySelectorAll('.time-option').forEach(o => o.classList.remove('active'));
            document.querySelector('.time-option[data-time="all"]').classList.add('active');
            filterState.time = 'all';
            break;
          case 'type':
            document.querySelectorAll('.type-option').forEach(o => o.classList.remove('active'));
            document.querySelector('.type-option[data-type="all"]').classList.add('active');
            filterState.type = 'all';
            break;
          case 'sort':
            document.querySelectorAll('.sort-option').forEach(o => o.classList.remove('active'));
            document.querySelector('.sort-option[data-sort="hot"]').classList.add('active');
            filterState.sort = 'hot';
            break;
        }
      });
    });
    
    // 重置所有筛选条件
    resetFiltersBtn.addEventListener('click', () => {
      // 重置分类
      document.querySelectorAll('.category-tag').forEach(t => t.classList.remove('active'));
      document.querySelector('.category-tag.all').classList.add('active');
      
      // 重置时间
      document.querySelectorAll('.time-option').forEach(o => o.classList.remove('active'));
      document.querySelector('.time-option[data-time="all"]').classList.add('active');
      
      // 重置内容类型
      document.querySelectorAll('.type-option').forEach(o => o.classList.remove('active'));
      document.querySelector('.type-option[data-type="all"]').classList.add('active');
      
      // 重置排序
      document.querySelectorAll('.sort-option').forEach(o => o.classList.remove('active'));
      document.querySelector('.sort-option[data-sort="hot"]').classList.add('active');
      
      // 重置搜索
      searchInput.value = '';
      
      // 重置状态
      filterState.category = 'all';
      filterState.time = 'all';
      filterState.type = 'all';
      filterState.sort = 'hot';
      filterState.search = '';
      
      // 更新活跃筛选标签
      updateActiveFilterTags();
    });
    
    // 应用筛选条件
    applyFiltersBtn.addEventListener('click', () => {
      applyFilters();
      // 隐藏筛选面板
      filterPanel.classList.remove('active');
      const icon = filterToggle.querySelector('i');
      icon.classList.remove('fa-chevron-up');
      icon.classList.add('fa-filter');
    });
    
    // 清除所有筛选条件
    clearAllFiltersBtn.addEventListener('click', () => {
      resetFiltersBtn.click();
      applyFilters();
    });
    
    // 搜索功能
    searchInput.addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        filterState.search = this.value.trim();
        applyFilters();
      }
    });
    
    // 更新活跃筛选标签
    function updateActiveFilterTags() {
      // 清除现有标签（保留"清除全部"按钮）
      const clearAllBtn = document.getElementById('clearAllFilters');
      activeFiltersContainer.innerHTML = '';
      activeFiltersContainer.appendChild(clearAllBtn);
      
      // 分类标签
      if (filterState.category !== 'all') {
        const categoryName = getCategoryName(filterState.category);
        addActiveFilterTag('category', categoryName);
      }
      
      // 时间标签
      if (filterState.time !== 'all') {
        const timeName = getTimeName(filterState.time);
        addActiveFilterTag('time', timeName);
      }
      
      // 内容类型标签
      if (filterState.type !== 'all') {
        const typeName = getTypeName(filterState.type);
        addActiveFilterTag('type', typeName);
      }
      
      // 排序标签
      if (filterState.sort !== 'hot') {
        const sortName = getSortName(filterState.sort);
        addActiveFilterTag('sort', sortName);
      }
      
      // 搜索标签
      if (filterState.search) {
        addActiveFilterTag('search', `"${filterState.search}"`);
      }
      
      // 如果没有活跃筛选条件，隐藏容器
      if (activeFiltersContainer.children.length <= 1) {
        activeFiltersContainer.style.display = 'none';
      } else {
        activeFiltersContainer.style.display = 'flex';
      }
    }
    
    // 添加活跃筛选标签
    function addActiveFilterTag(type, text) {
      const tag = document.createElement('div');
      tag.className = 'active-filter-tag';
      tag.innerHTML = `
        <span>${text}</span>
        <span class="remove-filter" data-type="${type}">×</span>
      `;
      
      // 添加删除事件
      tag.querySelector('.remove-filter').addEventListener('click', function() {
        const filterType = this.getAttribute('data-type');
        
        // 重置对应筛选条件
        switch(filterType) {
          case 'category':
            filterState.category = 'all';
            document.querySelectorAll('.category-tag').forEach(t => t.classList.remove('active'));
            document.querySelector('.category-tag.all').classList.add('active');
            break;
          case 'time':
            filterState.time = 'all';
            document.querySelectorAll('.time-option').forEach(o => o.classList.remove('active'));
            document.querySelector('.time-option[data-time="all"]').classList.add('active');
            break;
          case 'type':
            filterState.type = 'all';
            document.querySelectorAll('.type-option').forEach(o => o.classList.remove('active'));
            document.querySelector('.type-option[data-type="all"]').classList.add('active');
            break;
          case 'sort':
            filterState.sort = 'hot';
            document.querySelectorAll('.sort-option').forEach(o => o.classList.remove('active'));
            document.querySelector('.sort-option[data-sort="hot"]').classList.add('active');
            break;
          case 'search':
            filterState.search = '';
            searchInput.value = '';
            break;
        }
        
        // 应用更新后的筛选条件
        applyFilters();
      });
      
      activeFiltersContainer.insertBefore(tag, clearAllFiltersBtn);
    }
    
    // 获取分类名称
    function getCategoryName(category) {
      const names = {
        'food': '美食',
        'travel': '旅行',
        'tech': '科技',
        'entertainment': '娱乐',
        'sports': '体育',
        'health': '健康',
        'education': '教育',
        'finance': '财经',
        'fashion': '时尚'
      };
      return names[category] || category;
    }
    
    // 获取时间名称
    function getTimeName(time) {
      const names = {
        'day': '24小时内',
        'week': '本周',
        'month': '本月'
      };
      return names[time] || time;
    }
    
    // 获取类型名称
    function getTypeName(type) {
      const names = {
        'text': '纯文字',
        'single-img': '单图',
        'multi-img': '多图'
      };
      return names[type] || type;
    }
    
    // 获取排序名称
    function getSortName(sort) {
      const names = {
        'new': '最新发布',
        'comment': '评论最多',
        'like': '点赞最多'
      };
      return names[sort] || sort;
    }
    
    // 应用筛选条件
    function applyFilters() {
      // 更新活跃筛选标签
      updateActiveFilterTags();
      
      // 显示加载状态
      const loadMoreEl = document.querySelector('.load-more');
      loadMoreEl.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 筛选中...';
      
      // 模拟筛选延迟
      setTimeout(() => {
        const allTopics = document.querySelectorAll('.topic-item');
        let visibleCount = 0;
        
        allTopics.forEach(topic => {
          let isVisible = true;
          
          // 分类筛选
          if (filterState.category !== 'all') {
            if (topic.getAttribute('data-category') !== filterState.category) {
              isVisible = false;
            }
          }
          
          // 内容类型筛选
          if (filterState.type !== 'all' && isVisible) {
            if (topic.getAttribute('data-type') !== filterState.type) {
              isVisible = false;
            }
          }
          
          // 搜索筛选
          if (filterState.search && isVisible) {
            const title = topic.querySelector('.topic-title').textContent.toLowerCase();
            const desc = topic.querySelector('.topic-desc')?.textContent.toLowerCase() || '';
            const searchText = filterState.search.toLowerCase();
            
            if (!title.includes(searchText) && !desc.includes(searchText)) {
              isVisible = false;
            }
          }
          
          // 应用可见性
          if (isVisible) {
            topic.style.display = 'block';
            visibleCount++;
          } else {
            topic.style.display = 'none';
          }
        });
        
        // 处理空状态
        if (visibleCount === 0) {
          emptyState.classList.add('active');
        } else {
          emptyState.classList.remove('active');
        }
        
        // 恢复加载更多按钮状态
        loadMoreEl.innerHTML = '加载更多专题';
        
        // 滚动到顶部
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }, 800);
    }
    
    // 加载更多专题
    function loadMoreTopics() {
      const loadMoreEl = document.querySelector('.load-more');
      loadMoreEl.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        const topicsContainer = document.querySelector('.topics-container');
        
        // 随机生成新专题
        const topicTypes = [
          {type: 'text', category: 'education'},
          {type: 'single-img', category: 'food'},
          {type: 'multi-img', category: 'travel'},
          {type: 'text', category: 'finance'},
          {type: 'multi-img', category: 'fashion'}
        ];
        
        const randomIndex = Math.floor(Math.random() * topicTypes.length);
        const {type, category} = topicTypes[randomIndex];
        
        let newTopic = '';
        
        if (type === 'text') {
          newTopic = `
            <div class="topic-item" data-category="${category}" data-type="text">
              <a href="#" class="topic-link">
                <div class="topic-no-img">
                  <span class="topic-category">${getCategoryName(category)}</span>
                  <h3 class="topic-title">在线学习平台对比，哪款更适合自学编程？</h3>
                  <p class="topic-desc">随着编程学习的普及，各种在线学习平台层出不穷，本文将从课程质量、价格、学习体验等方面进行对比...</p>
                  <div class="topic-meta">
                    <div class="topic-meta-item">
                      <i class="fa fa-user-o"></i>
                      <span>编程导师</span>
                    </div>
                    <div class="topic-meta-item">
                      <i class="fa fa-comment-o"></i>
                      <span>78</span>
                    </div>
                    <div class="topic-meta-item">
                      <i class="fa fa-eye"></i>
                      <span>956</span>
                    </div>
                    <div class="topic-meta-item">
                      <i class="fa fa-heart-o"></i>
                      <span>210</span>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          `;
        } else if (type === 'single-img') {
          newTopic = `
            <div class="topic-item" data-category="${category}" data-type="single-img">
              <a href="#" class="topic-link">
                <div class="topic-single-img">
                  <div class="topic-content">
                    <span class="topic-category">${getCategoryName(category)}</span>
                    <h3 class="topic-title">在家也能做的网红甜点，简单易学零失败</h3>
                    <p class="topic-desc">不需要专业设备，在家就能做出媲美甜品店的美味甜点，新手也能轻松掌握...</p>
                    <div class="topic-meta">
                      <div class="topic-meta-item">
                        <i class="fa fa-user-o"></i>
                        <span>甜点师Lily</span>
                      </div>
                      <div class="topic-meta-item">
                        <i class="fa fa-comment-o"></i>
                        <span>124</span>
                      </div>
                      <div class="topic-meta-item">
                        <i class="fa fa-heart-o"></i>
                        <span>356</span>
                      </div>
                    </div>
                  </div>
                  <img src="https://picsum.photos/400/400?random=${Math.floor(Math.random() * 100)}" alt="甜点图片" class="topic-img">
                </div>
              </a>
            </div>
          `;
        } else {
          newTopic = `
            <div class="topic-item" data-category="${category}" data-type="multi-img">
              <a href="#" class="topic-link">
                <div class="topic-multi-img">
                  <span class="topic-category">${getCategoryName(category)}</span>
                  <h3 class="topic-title">日本关西小众景点推荐，深度体验当地文化</h3>
                  <p class="topic-desc">除了大阪京都，关西地区还有这些值得一去的地方，让你避开游客，体验更地道的日本风情...</p>
                  <div class="multi-img-container">
                    <img src="https://picsum.photos/300/300?random=${Math.floor(Math.random() * 100)}" alt="日本景点1">
                    <img src="https://picsum.photos/300/300?random=${Math.floor(Math.random() * 100)}" alt="日本景点2">
                    <img src="https://picsum.photos/300/300?random=${Math.floor(Math.random() * 100)}" alt="日本景点3">
                  </div>
                  <div class="topic-meta">
                    <div class="topic-meta-item">
                      <i class="fa fa-user-o"></i>
                      <span>环球旅行者</span>
                    </div>
                    <div class="topic-meta-item">
                      <i class="fa fa-comment-o"></i>
                      <span>187</span>
                    </div>
                    <div class="topic-meta-item">
                      <i class="fa fa-eye"></i>
                      <span>2.7k</span>
                    </div>
                    <div class="topic-meta-item">
                      <i class="fa fa-heart-o"></i>
                      <span>643</span>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          `;
        }
        
        topicsContainer.insertAdjacentHTML('beforeend', newTopic);
        loadMoreEl.innerHTML = '加载更多专题';
        
        // 如果有活跃筛选条件，重新应用筛选
        if (activeFiltersContainer.children.length > 1) {
          applyFilters();
        }
      }, 1500);
    }
    
    // 创建专题按钮点击事件
    document.querySelector('.create-topic-btn').addEventListener('click', function() {
      alert('创建专题功能即将上线，敬请期待！');
    });
    
    // 初始化活跃筛选标签容器状态
    updateActiveFilterTags();
  </script>
</body>
</html>
